<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='！' ">修改信息</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资：{{person.job.j1.salary}}K</h2>
  <button @click="person.name+='~' ">修改姓名</button>
  <button @click="person.age++ ">修改年龄</button>
  <button @click="person.job.j1.salary++ ">涨薪</button>
  <hr>
</template>

<script>
import {ref,watch,reactive} from 'vue'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Demo',
  // watch:{
  //   // sum:function (newVal,oldVal){
  //   //   console.log(newVal,oldVal)
  //   // }
  //   sum:{
  //     immediate:true,
  //     deep:true,
  //     handler:function (newVal,oldVal){
  //
  //     }
  //   }
  // },


  setup: function () {
    let sum = ref(0)
    let msg = ref('你好')
    let person = ref({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watch(sum,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    })
    watch(person,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    },{deep:true})



    return {
      sum,msg,person

    }
  }
}
</script>


